<template>
	<div class="container" :style="backgroundDiv">
		<div id="login-box">
			<h1>欢迎使用东软敏捷可视化教学管理系统</h1>
			<div class="form">
				<div class="item">
					<i class="fa fa-github-alt" style="font-size:24px"></i>
					<input v-model="form.username" type="text" placeholder="用户名" />
				</div>
				<div class="item">
					<i class="fa fa-search" style="font-size:24px"></i>
					<input v-model="form.password" type="password" placeholder="密码" />
				</div>
			</div>
			<button @click="login">登录</button>
		</div>
	</div>
</template>

<script>
import axios from '@/utils/axiosutils.js';
import { mapMutations } from 'vuex';
export default {
	name: 'login',
	data() {
		return {
			form: {
				username: '',
				password: ''
			},
			rules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			},
			backgroundDiv : {
			        backgroundImage : 'url(' + require('@/assets/images/login.jpg') + ')',
			        backgroundRepeat : 'no-repeat',
			        backgroundSize : '100% 100%',
			},  
		};
	},
	methods: {
		/* ...mapMutations(['changeLogin']),
		submitForm() {
			axios.post(
			'/user/login',
			resp=>{
				var str=JSON.parse(resp.obj);
				this.userToken=str.token;
				this.changeLogin({ Token: this.userToken });
				this.$router.push({name:'home'})
			},{
				username: this.username,
				password: this.password
			})
			
			
		} */
		...mapMutations(['setToken','SET_ACCOUNT']),
		login: function() {
			axios.get(
				'/user/token',
				ret => {
					this.$message('登录成功');
					axios.setToken(ret.obj);
					//存储起来
					this.SET_ACCOUNT(this.form.username );
					this.setToken(ret.obj);
					this.$router.push({
						path: '/'
					});
				},
				this.form
			);
		}
	}
};
</script>

<style scoped>
.container {
	padding: 0px;
	margin: 0px;
	width: 100vw;
	height: 100vh;
	border: #ff55ff solid 0px;
	/* background-image: url(../../images/background.jpg); */
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

#login-box {
	width: 30%;
	height: auto;
	text-align: center;
	background: #00000060;
	padding: 20px 50px;
}

#login-box h1 {
	color: #fff;
}

#login-box .form .item {
	margin-top: 15px;
}

#login-box .form .item i {
	font-size: 18px;
	color: #fff;
}

#login-box .form .item input {
	width: 180px;
	font-size: 18px;
	border: 0;
	border-bottom: 2px solid #fff;
	padding: 5px 10px;
	background: #ffffff00;
	color: #fff;
}

#login-box button {
	margin-top: 20px;
	width: 190px;
	height: 30px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
	border: 0;
	border-radius: 15px;
}

.regist {
	color: gainsboro;
	font-size: 13px;
}

.regist span:hover {
	color: #669933;
	cursor: pointer;
	font-weight: 900;
}
</style>
